<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>Title</title>
        </head>
        <body>
        <%= require('./common/top.htm') %>

        <div id="Content">
            <div id="BackLink">
                <a href="./catalog-main.html">Return to Main Menu</a>
            </div>

            <div id="Payment" align="center">
                <table>
                    <tr>
                            <th colspan=2>Payment Details</th>
                    </tr>
                    <tr>
                            <td>Card Type:</td>
                            <td><select id="cardType">
                                    <option value="visa"> Visa</option>
                                    <option value="mastercard"> MasterCard</option>
                                    <option value="Americanexpress"> American Express</option>
                            </select></td>
                    </tr>
                    <tr>
                            <td>Card Number:</td>
                            <td><input type="text" id="creditCard"/></td>
                    </tr>
                    <tr>
                            <td>Expiry Date (MM/YYYY):</td>
                            <td><input type="text" id="expiryDate"/></td>
                    </tr>
                    <tr>
                            <th colspan=2>Billing Address</th>
                    </tr>

                    <tr>
                            <td>First name:</td>
                            <td><input type="text" id="billToFirstName"></td>
                    </tr>
                    <tr>
                            <td>Last name:</td>
                            <td><input type="text" id="billToLastName"></td>
                    </tr>
                    <tr>
                            <td>Address 1:</td>
                            <td><input type="text" size="40" id="billAddress1"></td>
                    </tr>
                    <tr>
                            <td>Address 2:</td>
                            <td><input type="text" size="40" id="billAddress2"></td>
                    </tr>
                    <tr>
                            <td>City:</td>
                            <td><input type="text" id="billCity"></td>
                    </tr>
                    <tr>
                            <td>State:</td>
                            <td><input type="text" size="4" id="billState"></td>
                    </tr>
                    <tr>
                            <td>Zip:</td>
                            <td><input type="text" size="10" id="billZip"></td>
                    </tr>
                    <tr>
                            <td>Country:</td>
                            <td><input type="text" size="15" id="billCountry"></td>
                    </tr>

                    <tr>
                            <td colspan=2><input type="checkbox" id="ShipTo" value="shippingAddressRequired"/>
                                    Ship to different address...
                            </td>
                    </tr>

                </table>
            <p></p>
            <input type="button" id="newOrder" value="Continue"/>
                
        </div>

        <%= require('./common/bottom.htm') %>

        </body>
</html>